<template>
  <ul class="img-text-list">
      <li class="img-text-item" v-for="(item,index) in ImageText" :key="index">
          <div class="img-box">
            <img :src="item.src" alt />
            <router-link to>详情></router-link>
        </div>
        <div class="content">
            <p class="title only-1">{{item.title}}</p>
            <div class="content-text multi-line">{{item.content}}</div>
        </div>
      </li>
  </ul>
</template>

<script>
export default {
    props:{
        ImageText:Array
    },
    data(){
        return{
           
        }
    }
}
</script>

<style lang="scss" scoped>
.img-text-list{
    width:100%;
    .img-text-item{
        display: inline-block;
        width: 285px;
        margin-right: 20px;
        margin-bottom: 20px;
        background-color: #fff;
        overflow: hidden;
        &:nth-of-type(4n) {
        margin-right: 0;
        }
        .img-box {
            position: relative;
            // width: 100%;
            // height: 214px;
            overflow: hidden;
            a {
                display: none;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 64px;
                height: 24px;
                background: rgba(229, 184, 127, 0.8);
                border-radius: 10px;
                font-size: 12px;
                line-height: 24px;
                color: #fff;
                text-align: center;
            }
        }
        .content{
			padding:10px;
			.title {
				font-size: 16px;
			}
			.content-text{
				font-size: 14px;
				color: #999;
			}
        }
        &:hover {
            a {
                display: block;
            }
            .content{
                background-color: #E5E5E5;
            }
        }
    }
}

</style>